<template>
	<div class="h-full">
		<fs-crud ref="crudRef" v-bind="crudBinding">
			<template #pagination-left>
				<fs-button icon="ion:trash-outline" @click="handleBatchDelete" />
			</template>
			<template #cell_url="scope">
				<n-tooltip trigger="hover">
					<template #trigger>
						<n-button> 预览 </n-button>
					</template>
					<n-image width="120px" height="120px" :src="baseURL + '/' + scope.row.url"></n-image>
				</n-tooltip>
			</template>
		</fs-crud>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';

const baseURL = import.meta.env.VITE_API_URL;

export default defineComponent({
	name: 'FastCrud',
	setup() {
		const crudRef = ref();
		const crudBinding = ref();
		const { expose } = useExpose({ crudRef, crudBinding });
		const { crudOptions, selectedIds } = createCrudOptions({ expose });
		const { resetCrudOptions } = useCrud({ expose, crudOptions });

		// 页面初始化
		onMounted(() => {
			expose.doRefresh();
		});
		// 批量删除
		const handleBatchDelete = async () => {
			if (selectedIds.value?.length > 0) {
				// ElMessageBox.confirm(`确定要批量删除这${selectedIds.value.length}条记录吗`, '确认', {
				//     confirmButtonText: '确定',
				//     cancelButtonText: '取消',
				//     type: 'info',
				// }).then(async () => {
				//        await delBatchSysFile(selectedIds.value);
				//       message.success('删除成功');
				//       selectedIds.value = [];
				//       await expose.doRefresh();
				//         ElMessage.success('删除成功');
				//     })
				//     .catch(() => { });
			} else {
				// ElMessage.success('请勾选要删除的记录');
			}
		};
		return {
			crudBinding,
			crudRef,
			handleBatchDelete,
			baseURL,
		};
	},
});
</script>
